<template>
	<view>
	<view class="all-bill">
		<view class="filter-box">
			<view class="date-box" @click="showMonthBox = true">
				<span class="date-text">{{checkDate ? formatDate(checkDate) : '全部日期'}}</span>
				<u-icon name="arrow-down-fill" color="#fff" size="14"></u-icon>
			</view>
		<view class="num-box">
		  <view class="month-money" style="padding-right: 20rpx">
		  	<u--text text="总支出" size="16" color="#666"></u--text>
		  	<u--text mode="price" size="16" :text="totalExpense" color="#697AE4"></u--text>
		  </view>
		  <view class="month-money">
		  	<u--text text="总收入" size="16" color="#666"></u--text>
		  	<u--text mode="price" size="16" :text="totalIncome" color="#697AE4"></u--text>
		  </view>
		  </view>
		</view>
		<view class="list">
		  <u-list v-if="billList.length > 0" style="height: 100%;" @scrolltolower="scrolltolower" :pagingEnabled="true">
			<view class="day-item" v-for="item in billList" :key="item.id">
				<view class="item-header">
					<view class="date">{{item.day | dayFormat}}&nbsp;&nbsp;{{item.week | weekFormat}}</view>
					<view class="total">
						<u-tag text="出" bgColor="#8f94fb" borderColor="#8f94fb" size="mini"></u-tag><text class="item-total-money">{{item.day_pay | fixed2 }}</text>
						<u-tag text="入"  bgColor="#8f94fb" borderColor="#8f94fb" size="mini"></u-tag><text class="item-total-money">{{item.day_income | fixed2}}</text>
					</view>
				</view>
				<view class="bill-item" v-for="sitem in item.bills" :key="sitem.id" @click="seeDetail(sitem)">
					<view class="icon">
						<view style="color: #697AE4"
							:class="sitem.icon ? `iconfont ${sitem.icon}` : 'iconfont icon-listgouwu'"></view>
					</view>
					<view class="category">{{sitem.category_name}}</view>
					<view :class="sitem.flag === 'pay' ? 'pay' : 'income'">
						{{sitem.flag === 'pay' ? '-' : '+'}}
						{{(sitem.cost / 100).toFixed(2)}}
					</view>
				</view>
			</view> 
		  </u-list>
		  <view v-else>
			  <u-empty mode="list">
			</u-empty>
		  </view>
		</view>	
	</view>
	
	<u-popup :show="showMonthBox" @close="closeMonthBox" closeable>
		<view class="month-box">
			<view class="title">请选择月份</view>
			 <u-grid :border="false" col="3">
			    <u-grid-item v-for="item in monthList" :key="item">
			         <u-tag v-if="item === checkDate" class="month-tag" :text="item || '全部日期'" size="large" color="#fff"  
					 type="primary" bgColor="#697AE4" borderColor="#697AE4" @click="toCheckDate(item)"></u-tag>
					 <u-tag v-else class="month-tag" :text="item || '全部日期'" size="large" color="#666"
					   type="primary" plain bgColor="#f5f5f5" borderColor="#f5f5f5" @click="toCheckDate(item)"></u-tag>
			        </u-grid-item>
			 </u-grid>
	    </view>		
	</u-popup>
	
</view>	
</template>

<script>
	import { getBillList } from '@/api/bill.js'
	export default {
		data() {
			return {
				searchConf: {
					pageNo: 1,
					pageSize: 8,
					// billDate: uni.$u.timeFormat(+new Date(), 'yyyy-mm')
				},
				checkDate: null,
				totalExpense: 0,
				totalIncome: 0,
				billList: [],
				showMonthBox: false,
				monthList: []
			}
		},
		onShow() {
			this.fetchBillList()
		},
		onReady() {
			const month = new Date().getMonth() + 1
			const year = new Date().getFullYear()
			for(let i = month; i >= 1; i--) {
				let mon = i < 10 ? `0${i}` : `${i}`
				this.monthList.push(`${year}-${mon}`)
			}
			this.monthList.unshift(null)
		},
		onPullDownRefresh() {
			this.fetchBillList()
		},
		methods: {
		 formatDate(val) {
			const year = val.split('-')[0]
			const month = val.split('-')[1] >= 10 ? val.split('-')[1] : val.split('-')[1].substr(-1)
			return `${year}年${month}月`
	 	 },
		scrolltolower() {
			this.loadMore()
		},
		async fetchBillList() {
			this.searchConf.pageNo = 1
			this.billList = []
			const rsp = await getBillList(this.searchConf)
			if (rsp.code === 0) {
				this.billList = rsp.data.list 
				this.totalExpense = rsp.data.totalExpense
				this.totalIncome = rsp.data.totalIncome
			}
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1500);
		},
		async loadMore() {
			this.searchConf.pageNo ++
			const rsp = await getBillList(this.searchConf)
			if (rsp.code === 0) {
				this.billList = this.billList.concat(rsp.data.list) 
				this.totalExpense = rsp.data.totalExpense
				this.totalIncome = rsp.data.totalIncome
			}
		},
		seeDetail(item) {
			uni.$u.route('/pages/bill-detail/index', item);
		},
		toCheckDate(item) {
			this.checkDate = item
			this.searchConf.billDate = item
			this.closeMonthBox()
			this.fetchBillList()
		},
		closeMonthBox() {
			this.showMonthBox = false
		}
	   }
	}
</script>

<style lang="scss" scoped>
	.all-bill {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		height: 100vh;
		.filter-box {
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 20rpx 0;
			.num-box {
				display: flex;
				justify-content: center;
				align-items: center;
				.month-money {
				display: flex;
				justify-content: center;
				align-items: center;
				// padding-right: 20rpx;
			   }
			}
			.date-box {
				background-color: #697AE4;
				border-radius: 8rpx;
				padding: 10rpx 16rpx;
				display: flex;
				align-items: center;
				margin-left: -30rpx;
				color: #fff;
				&:active {
					background-color: #787fe4;
				}
				.date-text {
					padding-right: 8rpx;
					font-size: 14px;
				}
			}
		}
		.list {
				padding: 0 20rpx 20rpx 20rpx;
				flex: 1;
				overflow: auto;
				.day-item {
					.item-header {
						display: flex;
						align-items: center;
						justify-content: space-between;
						.total {
							display: flex;
							align-items: center;
							.item-total-money {
								color: #666;
								font-size: 14px;
								padding: 0 10rpx;
							}
						}
						.date {
							color: #767a7f;
							padding-bottom: 20rpx;
						}
		
					}
		
					.bill-item {
						display: flex;
						justify-content: space-around;
						align-items: center;
						background-color: rgba(210, 238, 247, .2);
						padding: 25rpx 20rpx;
						margin-bottom: 30rpx;
						border-radius: 8rpx;
		
						.category {
							flex: 1;
							font-weight: 500;
							color: #4f5a7d;
							margin-left: 10rpx;
		
						}
		
						.pay {
							color: #c8223b;
							font-weight: 500;
						}
		
						.income {
							color: #2f307d;
							font-weight: 500;
						}
					}
				}
			}
		
	}
	.month-box {
		height: 25vh;
		padding: 80rpx 40rpx;
		.title {
			text-align: center;
			margin: -60rpx 0 40rpx 0;
			color: #666;
		}
		.month-tag {
			margin: 15rpx;
		}
	}
	</style>
